<template>
  <div class="box">
    <!-- 一楼 -->
    <div class="f1">
      <div class="center">
        <div class="f1_list">
          <h1>数据洞察世界 智能遇见未来</h1>
          <img src="@/assets/home/组38.png" alt="" />
        </div>
        <div class="f1_right">
          <el-form :model="form" label-width="100px">
            <el-form-item label="所属专区">
              <el-select v-model="form.e">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="不限" value="8918"></el-option>
                <el-option
                  key="2"
                  label="花湖机场专区"
                  value="花湖机场专区"
                ></el-option>
                <el-option
                  key="3"
                  label="首衡城专区"
                  value="首衡城专区"
                ></el-option>
                <el-option
                  key="4"
                  label="武汉经开专区"
                  value="武汉经开专区"
                ></el-option>
                <el-option
                  key="5"
                  label="武汉东湖高新专区"
                  value="武汉东湖高新专区"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                style="width: 240px"
                v-model="form.a"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input
                style="width: 240px"
                v-model="form.d"
                placeholder="请输入产品名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="产品类型">
              <el-select v-model="form.b">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="不限" value="8918"></el-option>
                <el-option key="2" label="抵押融资专区" value="101"></el-option>
                <el-option
                  key="3"
                  label="供应链融资专区"
                  value="102"
                ></el-option>
                <el-option
                  key="4"
                  label="国际贸易融资专区"
                  value="103"
                ></el-option>
                <el-option key="5" label="贸易结算专区" value="104"></el-option>
                <el-option key="6" label="保函产品专区" value="105"></el-option>
                <el-option key="7" label="信用融资专区" value="100"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="融资额度">
              <el-select v-model="form.c">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="不限" value="8918"></el-option>
                <el-option key="2" label="300万以下" value="300"></el-option>
                <el-option key="3" label="500万以下" value="500"></el-option>
                <el-option key="4" label="1000万以下" value="1000"></el-option>
                <el-option key="5" label="2000万以下" value="2000"></el-option>
                <el-option key="6" label="2000万以上" value="2001"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="融资期限">
              <el-select v-model="form.f">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="不限" value="8918"></el-option>
                <el-option key="2" label="6个月以下" value="6"></el-option>
                <el-option key="3" label="12个月以下" value="12"></el-option>
                <el-option key="4" label="12个月以上" value="16"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="btn">
            <h4 @click="search">搜索</h4>
            <h6 @click="reset">
              <img src="@/assets/home/reset.png" alt="" />重置
            </h6>
          </div>
        </div>
      </div>
    </div>

    <!--二楼 -->
    <div class="f2">
      <div class="content">
        <!-- <h4>产品列表</h4> -->
        <div class="matching">
          <div class="matching_left">
            <h4>
              共匹配到 <span>{{ total }}</span> 个产品
            </h4>
          </div>
          <div class="matching_right">
            <h6>
              <span @click="paixuLists('evalute', this.evalute)">评分</span>

              <div>
                <template v-if="evalute == 0">
                  <img
                    @click="paixuList('evalute', 0, 0)"
                    src="@/assets/home/组082.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('evalute', 0, 1)"
                    src="@/assets/home/组081.png"
                    alt=""
                  />
                </template>
                <template v-if="evalute == 1">
                  <img
                    @click="paixuList('evalute', 1, 0)"
                    src="@/assets/home/组083.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('evalute', 1, 1)"
                    src="@/assets/home/组084.png"
                    alt=""
                  />
                </template>
              </div>
            </h6>
            <h6>
              <span @click="paixuLists('creditamount', this.creditamount)"
                >额度</span
              >
              <div>
                <template v-if="creditamount == 0">
                  <img
                    @click="paixuList('creditamount', 0, 0)"
                    src="@/assets/home/组082.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('creditamount', 0, 1)"
                    src="@/assets/home/组081.png"
                    alt=""
                  />
                </template>
                <template v-if="creditamount == 1">
                  <img
                    @click="paixuList('creditamount', 1, 0)"
                    src="@/assets/home/组083.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('creditamount', 1, 1)"
                    src="@/assets/home/组084.png"
                    alt=""
                  />
                </template>
              </div>
            </h6>
            <h6>
              <span @click="paixuLists('radio', this.radio)"> 利率</span>
              <div>
                <template v-if="radio == 0">
                  <img
                    @click="paixuList('radio', 0, 0)"
                    src="@/assets/home/组082.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('radio', 0, 1)"
                    src="@/assets/home/组081.png"
                    alt=""
                  />
                </template>
                <template v-if="radio == 1">
                  <img
                    @click="paixuList('radio', 1, 0)"
                    src="@/assets/home/组083.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('radio', 1, 1)"
                    src="@/assets/home/组084.png"
                    alt=""
                  />
                </template>
              </div>
            </h6>
            <h6>
              <span @click="paixuLists('creditmonth', this.creditmonth)">
                期限</span
              >
              <div>
                <template v-if="creditmonth == 0">
                  <img
                    @click="paixuList('creditmonth', 0, 0)"
                    src="@/assets/home/组082.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('creditmonth', 0, 1)"
                    src="@/assets/home/组081.png"
                    alt=""
                  />
                </template>
                <template v-if="creditmonth == 1">
                  <img
                    @click="paixuList('creditmonth', 1, 0)"
                    src="@/assets/home/组083.png"
                    alt=""
                  />
                  <img
                    @click="paixuList('creditmonth', 1, 1)"
                    src="@/assets/home/组084.png"
                    alt=""
                  />
                </template>
              </div>
            </h6>
          </div>
        </div>
        <!-- 二楼左侧下侧 -->
        <div class="f2-left-bottom">
          <!-- 产品列表 -->
          <!-- 空状态 -->
          <div v-if="!data" class="null">
            <img src="../../assets/PC/金融服务/暂无记录.png" alt="" />
            <span>暂无可申请的产品</span>
          </div>
          <!-- 关税保函 -->
          <template v-else>
            <div v-if="data" class="product">
              <div
                class="product-item"
                v-for="(item, index) in data"
                :key="index"
              >
                <div class="product-item-name">
                  <div
                    class="tab"
                    v-if="
                      item.productcode != 'SCF008001' &&
                      item.dbway != null &&
                      item.dbway != 'null' &&
                      item.dbway != ''
                    "
                  >
                    <div class="tab_sj"></div>
                    <p>{{ item.dbway }}</p>
                  </div>
                  <img :src="item.show05" alt="" />
                  <h5 v-if="item.guarantee">{{ item.guarantee }}</h5>
                </div>
                <div class="chen">
                  <div class="product-item-productname">
                    <div class="productname">
                      <h3>{{ item.productname }}</h3>
                      <h4
                        v-for="areanameItem in item.areaname1"
                        :key="areanameItem"
                        :class="{
                          hhjczq: areanameItem == '花湖机场专区',
                          shczq: areanameItem == '首衡城专区',
                          whzq:
                            areanameItem == '武汉专区 ' ||
                            areanameItem == '武汉专区' ||
                            areanameItem == '武汉东湖高新专区' ||
                            areanameItem == '武汉经开专区',
                        }"
                      >
                        {{ areanameItem }}
                      </h4>
                    </div>
                    <div class="product-item-success">
                      <ul v-if="item.amount || item.month || item.radio">
                        <li style="width: 100px">
                          <h4>{{ item.amount }}<span> </span></h4>
                          <!-- <h5>最高额度</h5> -->
                          <h5>{{ item.showamount }}</h5>
                        </li>
                        <li style="width: 100px">
                          <h4>{{ item.month }}<span> </span></h4>
                          <!-- <h5>最高期限</h5> -->
                          <h5>{{ item.showmonth }}</h5>
                        </li>
                        <li style="width: 220px">
                          <h4 style="color: #ff752c">
                            {{ item.radio }}<span> </span>
                          </h4>
                          <h5>{{ item.showradio }}</h5>
                          <!-- <h5>年化利率</h5> -->
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="product-item-apply">
                  <h4 @click="goApplication(item.id, item)">立即申请</h4>
                  <div class="product-item-apply-btn">
                    <p @click="goApplicationDetails(item.id, item)">查看详情</p>
                    <!-- 查看详情 -->
                    <p
                      v-if="
                        item.productname == '关税保函' ||
                        item.productname == '关税E保' ||
                        item.productname == '关税保证保险' ||
                        item.productname == '关税履约保证保险'
                      "
                      @click="goOfficialApplication(item.id, item)"
                    >
                      预授信评估
                    </p>
                    <!--  -->
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div class="pagination" v-if="data">
            <el-pagination
              next-text="下一页"
              prev-text="上一页"
              background
              layout="prev, pager, next"
              @next-click="nextClick()"
              @prev-click="prevClick()"
              @current-change="handlePageChange"
              :total="pages * 10"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { selectkj } from "@/utils";
export default {
  data() {
    return {
      sort: "", //排序用排序名称
      paixu: "", //排序用 0 1
      evalute: "0", // 评分
      creditamount: "0", // 额度
      radio: "0", // 利率
      creditmonth: "0", //  期限
      zone: "",
      producttype: "",
      form: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
        f: "",
      },
      pages: 1,
      pageSize: 5,
      pageNum: 1,
      total: 0, //总条数
      gsbh: [],
      gseb: [],
      sxb: [],
      gsbzbx: [],
      data: null,
    };
  },
  mounted() {
    if (this.$route.query.zone) {
      this.form.e = this.$route.query.zone;
      this.zone = this.$route.query.zone;
    } else {
      this.zone = "";
    }
    if (this.$route.query.producttype) {
      this.form.b = this.$route.query.producttype;
    }
    this.selectkj();
    document.documentElement.scrollTop = 0;
  },
  methods: {
    // 排序 参数1:点击的是哪个模块；参数2:模块值，0上箭头可点击，下箭头不可点击；1上箭头不可点击，下箭头可点击，；参数3：排序值，0正序，1倒序
    paixuList(sort, order, paixu) {
      // 评分
      if (sort == "evalute" && order == 0 && paixu == 1) {
        return;
      } else if (sort == "evalute" && order == 0 && paixu == 0) {
        this.evalute = 1;
        this.paixu = "a";
        this.sort = sort;
        this.selectkj();
      } else if (sort == "evalute" && order == 1 && paixu == 0) {
        return;
      } else if (sort == "evalute" && order == 1 && paixu == 1) {
        this.evalute = 0;
        this.sort = sort;
        this.paixu = "d";
        this.selectkj();
      }
      // 额度
      if (sort == "creditamount" && order == 0 && paixu == 1) {
        return;
      } else if (sort == "creditamount" && order == 0 && paixu == 0) {
        this.creditamount = 1;
        this.paixu = "a";

        this.sort = sort;
        this.selectkj();
      } else if (sort == "creditamount" && order == 1 && paixu == 0) {
        return;
      } else if (sort == "creditamount" && order == 1 && paixu == 1) {
        this.creditamount = 0;
        this.sort = sort;
        this.paixu = "d";
        this.selectkj();
      }
      // 利率
      if (sort == "radio" && order == 0 && paixu == 1) {
        return;
      } else if (sort == "radio" && order == 0 && paixu == 0) {
        this.radio = 1;
        this.paixu = "a";

        this.sort = sort;
        this.selectkj();
      } else if (sort == "radio" && order == 1 && paixu == 0) {
        return;
      } else if (sort == "radio" && order == 1 && paixu == 1) {
        this.radio = 0;
        this.sort = sort;
        this.paixu = "d";
        this.selectkj();
      }
      // 期限
      if (sort == "creditmonth" && order == 0 && paixu == 1) {
        return;
      } else if (sort == "creditmonth" && order == 0 && paixu == 0) {
        this.creditmonth = 1;
        this.paixu = "a";
        this.sort = sort;
        this.selectkj();
      } else if (sort == "creditmonth" && order == 1 && paixu == 0) {
        return;
      } else if (sort == "creditmonth" && order == 1 && paixu == 1) {
        this.creditmonth = 0;
        this.sort = sort;
        this.paixu = "d";
        this.selectkj();
      }
    },
    paixuLists(sort, paixu) {
      if (sort == "evalute") {
        paixu == 0
          ? ((this.evalute = 1), (this.paixu = "a"), (this.sort = sort))
          : ((this.evalute = 0), (this.paixu = "d"), (this.sort = sort));
        this.selectkj();
      } else if (sort == "creditamount") {
        paixu == 0
          ? ((this.creditamount = 1), (this.paixu = "a"), (this.sort = sort))
          : ((this.creditamount = 0), (this.paixu = "d"), (this.sort = sort));
        this.selectkj();
      } else if (sort == "radio") {
        paixu == 0
          ? ((this.radio = 1), (this.paixu = "a"), (this.sort = sort))
          : ((this.radio = 0), (this.paixu = "d"), (this.sort = sort));
        this.selectkj();
      } else if (sort == "creditmonth") {
        paixu == 0
          ? ((this.creditmonth = 1), (this.paixu = "a"), (this.sort = sort))
          : ((this.creditmonth = 0), (this.paixu = "d"), (this.sort = sort));
        this.selectkj();
      }
    },
    // 重置
    reset() {
      this.form.a = "";
      this.form.b = "";
      this.form.c = "";
      this.form.d = "";
      this.form.e = "";
      this.form.f = "";
      this.selectkj();
    },
    // 点击数字改变page的值
    handlePageChange(currentPage) {
      this.pageNum = currentPage;
      this.selectkj();
    },
    // 点击下一页
    nextClick() {
      this.pageNum += 1;
      this.selectkj();
    },
    // 点击上一页
    prevClick() {
      this.pageNum -= 1;
      this.selectkj();
    },
    // 定时器
    setTime() {
      setTimeout(() => {
        this.$router.go(0);
      }, 500);
    },
    search() {
      this.pageNum = 1;
      this.pages = 1;
      this.selectkj();
    },
    // 获取产品列表
    async selectkj() {
      let paramet = {
        creditamount: this.form.c,
        creditmonth: this.form.f,
        areaname: this.form.e,
        funder: this.form.a,
        // orgtype: this.form.b,
        productname: this.form.d,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        zone: this.zone,
        producttype: this.form.b,
        sort: this.sort,
        paixu: this.paixu,
      };
      let { data } = await selectkj(paramet);
      this.pages = data.pages;
      this.data = data.list;
      let total = data.total;
      this.total = total;

      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].areaname != "" && this.data[i].areaname != null) {
          this.data[i].areaname1 = this.data[i].areaname.split(";");
        }
      }

      if (data.list.length == 0) {
        this.data = null;
      }
    },
    // 关税保函，关税E保 预授信申请
    goOfficialApplication(id, data) {
      localStorage.setItem("productcode", data.productcode);
      localStorage.setItem("productname", data.productname);
      localStorage.setItem("productcodeId", id);
      localStorage.removeItem("zhapplyid");
      if (
        data.productname == "关税保函" ||
        data.productname == "关税保证保险" ||
        data.productname == "关税履约保证保险"
      ) {
        // 跳转至关税保函申请页
        this.$router.push(`/gsbhysxApply?status=ysx`);
      } else if (data.productname == "关税E保") {
        // 跳转至关税E保申请页
        this.$router.push(`/gsebrz?status=ysx`);
      }
    },
    // 点击立即申请，跳转产品申请页
    goApplication(id, data) {
      localStorage.setItem("productcode", data.productcode);
      localStorage.setItem("productname", data.productname);
      localStorage.setItem("productcodeId", id);
      localStorage.setItem("producttype", data.producttype);
      localStorage.setItem("financingtype", data.financingtype);
      localStorage.setItem("radio", data.radio);
      let chen = JSON.stringify(data);
      sessionStorage.setItem("chen", chen);
      localStorage.removeItem("zhapplyid");
      let strArr = [];
      for (let i = 0; i < 6; i++) {
        strArr.push(data.productcode[i]);
      }
      let str = strArr.join("");
      if (data.productname == "关税保函") {
        // 跳转至关税保函申请页
        this.$router.push(`/gsbhysxApply`);
      } else if (data.productname == "关税E保") {
        // 跳转至关税E保申请页
        this.$router.push(`/gsebrz`);
      } else if (data.productname == "关税保证保险") {
        // 跳转至关税保证保险申请页
        this.$router.push(`/gsbzbxRz`);
      } else if (data.productname == "关税履约保证保险") {
        // 跳转至关税履约保证保险申请页
        this.$router.push(`/gslybzbxRz`);
      } else if (
        // 跳转至商票认证
        data.productname == "商票贴现融资" ||
        data.productname == "财票贴现融资" ||
        data.productname == "银票贴现融资" ||
        data.productname == "商票质押融资"
      ) {
        this.$router.push(`/prefectureRZ`);
      } else if (
        // 跳转至出口保理融资认证
        data.productname == "出口保理融资"
      ) {
        this.$router.push(`/ShangPiaoCkBlRzRZ`);
      } else if (data.financingtype == "融资类") {
        // 跳转至融资类申请页
        this.$router.push(`/FinancingType`);
      } else if (data.financingtype == "非融资类") {
        // 跳转至非融资类申请页
        this.$router.push(`/NotFinancingType`);
      } else if (str == "SCF006") {
        // 跳转至非融资类申请页
        this.$router.push(`/CyShuJuDai`);
      }
    },
    // 跳转产品详情页
    goApplicationDetails(id, data) {
      localStorage.setItem("productcode", data.productcode);
      localStorage.setItem("productname", data.productname);
      localStorage.setItem("productcodeId", id);
      localStorage.setItem("producttype", data.producttype);
      localStorage.setItem("financingtype", data.financingtype);
      localStorage.removeItem("zhapplyid");
      let chen = JSON.stringify(data);
      sessionStorage.setItem("chen", chen);
      let strArr = [];
      for (let i = 0; i < 6; i++) {
        strArr.push(data.productcode[i]);
      }
      let str = strArr.join("");
      if (data.productname == "关税保函") {
        // 跳转至关税保函申请页
        this.$router.push(`/gsbhysxApply?row=2`);
      } else if (data.productname == "关税E保") {
        // 跳转至关税E保申请页
        this.$router.push(`/gsebrz?row=2`);
      } else if (data.productname == "关税保证保险") {
        // 跳转至关税保证保险申请页
        this.$router.push(`/gsbzbxRz?row=2`);
      } else if (data.productname == "关税履约保证保险") {
        // 跳转至关税履约保证保险申请页
        this.$router.push(`/gslybzbxRz?row=2`);
      } else if (
        // 跳转至商票认证
        data.productname == "商票贴现融资" ||
        data.productname == "财票贴现融资" ||
        data.productname == "银票贴现融资" ||
        data.productname == "商票质押融资"
      ) {
        this.$router.push(`/prefectureRZ?row=2`);
      } else if (
        // 跳转至出口保理融资认证
        data.productname == "出口保理融资"
      ) {
        this.$router.push(`/ShangPiaoCkBlRzRZ?row=2`);
      } else if (data.financingtype == "融资类") {
        // 跳转至融资类申请页
        this.$router.push(`/FinancingType?row=2`);
      } else if (data.financingtype == "非融资类") {
        // 跳转至非融资类申请页
        this.$router.push(`/NotFinancingType?row=2`);
      } else if (str == "SCF006") {
        // 跳转至非融资类申请页
        this.$router.push(`/CyShuJuDai?row=2`);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .f1 {
    box-sizing: border-box;
    // padding: 10px 20px;
    width: 100%;
    background: url(@/assets/home/组080.png) no-repeat;
    background-size: cover;
    margin-bottom: 10px;
    .center {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      width: 1200px;
      height: 485px;
      .f1_list {
        h1 {
          font-size: 50px;
          font-family: Source Han Sans SC;
          font-weight: bold;
          color: #ffffff;
          margin-bottom: 100px;
        }
      }
      .f1_right {
        box-sizing: border-box;

        width: 390px;
        height: 420px;
        padding-top: 20px;
        background-color: #fff;
        .btn {
          display: flex;

          align-items: center;
          flex-direction: column;
          width: 100%;
          margin-top: 42px;
          h4 {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140px;
            height: 26px;
            border-radius: 2px;
            background: #0a7be0;
            opacity: 1;
            border-radius: 4px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 40px;
            color: #ffffff;
            opacity: 1;
          }
          h6 {
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #a2a2a2;
            margin-top: 10px;
            img {
              width: 13px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  .f2 {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
    border-radius: 6px;
    background-color: #f5f7fa;
    margin-top: 40px;
    .content {
      margin: 0 auto;
      width: 1200px;
      margin-bottom: 40px;
      // h4 {
      //   font-size: 24px;
      //   font-family: Microsoft YaHei;
      //   font-weight: bold;
      //   line-height: 33px;
      //   color: #181818;
      //   opacity: 1;
      // }
      .matching {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 47px;
        .matching_left {
          h4 {
            font-size: 18px;
            font-weight: 600;
            color: #000000;
          }
          span {
            color: #0a7be0;
          }
        }
        .matching_right {
          display: flex;
          align-items: center;
          height: 100%;

          h6 {
            display: flex;
            font-size: 16px;
            font-weight: 300;
            color: #646464;
            margin-left: 20px;
            span {
              font-size: 16px;
              font-weight: 300;
              color: #646464;
            }
            div {
              height: 80%;
              display: flex;
              justify-content: space-evenly;
              flex-direction: column;
              margin-left: 4px;

              img {
                width: 14px;
                height: 14px;
              }
            }
          }
        }
      }
      // 二楼左侧下部
      .f2-left-bottom {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        // box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
        border-radius: 6px;
        .title {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
          height: 25px;
          margin: 10px 15px 10px 15px;
          h5 {
            width: 3px;
            height: 21px;
            margin-right: 11px;
            background-color: #0a7be0;
          }
          h3 {
            font-size: 18px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #0a7be0;
          }
        }
        // 空状态
        .null {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: 80%;
          margin-top: 70px;
          img {
            width: 326px;
            height: 212px;
          }
          span {
            position: absolute;
            top: 195px;
            font-size: 14px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #b3b3b3;
          }
          .btn {
            width: 151px;
            height: 31px;
            font-size: 15px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #0a7be0;
            text-align: center;
            border: 1px solid #0a7be0;
            border-radius: 4px;
            line-height: 31px;
            margin-top: 40px;
            cursor: pointer;
          }
        }
        // 产品列表
        .product {
          width: 100%;
          margin-bottom: 60px;
          .product-item {
            display: flex;
            align-items: center;
            position: relative;
            height: 160px;
            background: #fff;
            // border-radius: 6px;
            margin-top: 15px;
            // 产品名称
            .product-item-name {
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 250px;
              height: 160px;
              background: #d7e8ff;
              img {
                width: 140px;
              }
              h5 {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 20px;
                width: 125px;
                height: 25px;
                color: #0a7be0;
                font-size: 14px;
                font-weight: 500;
                border-radius: 3px;
                background-color: rgb(119, 173, 250, 0.2);
              }
              .tab {
                display: flex;
                justify-content: center;
                // align-items: center;
                position: absolute;
                left: 15px;
                top: 0;
                width: 26px;
                height: 50px;
                background: #ff752c;
                .tab_sj {
                  position: absolute;
                  bottom: 0;
                  width: 0px;
                  height: 0px;
                  border: 13px solid #d7e8ff;
                  border-left-color: transparent;
                  border-top-color: transparent;
                  border-right-color: transparent;

                  // background-color: #f00;
                }
                p {
                  margin-top: 5px;
                  font-size: 13px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  line-height: 0px;
                  color: #fff;
                  writing-mode: vertical-rl;
                  line-height: 50px;
                }
              }
            }
            .chen {
              box-sizing: border-box;
              padding: 20px 50px;
              display: flex;
              flex-direction: column;
              width: 60%;
              height: 100%;
              .product-item-productname {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 100%;
                .productname {
                  display: flex;
                  align-items: center;
                  h3 {
                    font-size: 20px;
                    font-family: Source Han Sans SC;
                    font-weight: bold;
                    color: #0a7be0;
                  }
                  h4 {
                    box-sizing: border-box;
                    padding: 4px 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 18px;
                    color: #fff;
                    font-size: 12px;
                    margin-left: 20px;
                    font-weight: 500;
                    background-color: #4fcc9c;
                    &.hhjczq {
                      background-color: #0991d1;
                    }
                    &.shczq {
                      background-color: #359f6e;
                    }
                    &.whzq {
                      background-color: #df923c;
                    }
                  }
                }
              }
              .product-item-success {
                margin-top: 10px;
                // height: 70px;
                ul {
                  display: flex;
                  justify-content: space-between;

                  li {
                    // width: 240px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 70px;
                    h4 {
                      font-size: 22px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #0a7be0;
                      text-align: center;
                      span {
                        font-size: 18px;
                      }
                    }
                    h5 {
                      font-weight: 400;
                      color: #858585;
                      text-align: center;
                      font-size: 18px;
                      color: #181818;
                      font-family: Microsoft YaHei;
                    }
                  }
                }
              }
            }
          }

          .product-item-apply {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            position: absolute;
            top: 45px;
            right: 50px;
            height: 80px;
            cursor: pointer;
            h4 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 120px;
              height: 36px;
              background: #0a7be0;
              border-radius: 4px;
              font-size: 16px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #ffffff;
              cursor: pointer;
            }
            .product-item-apply-btn {
              width: 160px;
              display: flex;
              justify-content: space-around;
              p {
                text-align: center;
                width: 70px;
                height: 25px;
                font-size: 14px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                // text-decoration: underline;
                color: #0a7be0;
                border-bottom: 1px solid #0a7be0;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
  // 弹出框
  .dialog-center {
    width: 90%;
    margin: 0 auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #48a0b8;
      border: 1px solid #56b1ca;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #58b2cb;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .el-form-item {
    // margin-bottom: 10px;
    margin-top: 15px;
    font-size: 16px;
  }
}
// 分页器
.pagination {
  width: 100%;
  display: flex;
  padding: 5px 30px 5px 10px;
  justify-content: center;
  span {
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #666666;
    margin-top: 2px;
    margin-left: 10px;
  }
}
::v-deep(.el-pagination span) {
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 0 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
::v-deep(.el-pagination.is-background .el-pager li) {
  width: 35px;
  border-radius: 0px;
  background: #fff;
  border: 1px solid #ddd;
}
::v-deep(.lee-pager .active) {
  background: #0a7be0;
  border: 0px solid #ddd;
}
/* 输入框样式  */
::v-deep(.el-input__inner) {
  box-sizing: border-box;
  width: 220px;
  height: 26px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 26px !important;
}
::v-deep(.el-form-item) {
  margin-bottom: 0px;
}
/* 分页器 */
::v-deep(.el-pagination.is-background .el-pager li) {
  border-radius: 0px;
}
::v-deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: #0a7be0;
  border: 0px solid #fff;
  font-weight: 400;
}
::v-deep(.el-pagination) {
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
::v-deep(.lee-pager li) {
  background-color: #fff;
  border: 1px solid #ddd;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 21px;
  color: #666666;
}
::v-deep(.lee-pagination .btn-next) {
  background: #fff;
  padding: 3px 6px;
  border: 1px solid #ddd;
}
::v-deep(.lee-pagination .btn-prev) {
  background: #fff;
  padding: 3px 6px;
  border: 1px solid #ddd;
}
</style>
<style lang="scss">
/* 邀请客户弹窗 */
.el-dialog--center .el-dialog__body {
  padding: 10px 0 25px;
}
</style>
